<template>
	<view class="list-box">
		<!-- <view class="title space-between center">

			<view class="center">
				<text class="name">{{name}}</text>
				<text class="word" v-if="word">{{word}}</text>
			</view>
			<view class="all">

				<text>前部</text>
				<text class="iconfont icon-right">&#xe6a3;</text>

			</view>
		</view> -->


		<list-box :name="name" :word="word">
			<!-- (item,index) in 2 循环两个 -->
			<!--  :item="it"子组件的 item接收父组件  couseData拿到的数据并遍历的数组传给 子组件 -->
			<!-- 根据每页显示多少行来动态显示高度  :style="{height:`${200*row}rpx`}" -->
			<swiper class="list-swiper" next-margin="80rpx" :style="{height:`${200*row}rpx`}">
				<swiper-item v-for="(ite,index) in column" :key="index" class="swiper-item">
					<couse-item v-for="(it, i) in couseData.slice(index*row,(index+1)*row)" :key="i" :item="it">
					</couse-item>
				</swiper-item>

			</swiper>
		</list-box>
	</view>
</template>

<script>
	import listBox from './list-box.vue'
	import couseItem from "@/components/common/course-item.vue"

	import mockCourseData from "@/mock/courseData.js"
	export default {

		components: {
			couseItem,
			listBox

		},
		props: {
			name: {
				type: String,
				default: "热门推荐"
			},
			word: {
				type: String,
				default: ""
			},
			column: {
				type: Number,
				default: 2
			},
			row: {
				type: Number,
				default: 4
			},
			couseData: {
				type: Array,
				default: () => mockCourseData
			}

		},
		

	}
</script>

<style lang="scss">
	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list-box {
		margin-top: 60rpx;

		.name {
			font-size: 38rpx;
			font-weight: 500;
			color: #303133;
			margin-right: 10rpx;
		}

		.word {
			font-size: 20rpx;
			// linear-gradient颜色渐变
			// background-image: linear-gradient(to right, $mxg-color-orange, $mxg-text-color-red);
			color: white;
			padding: 0 10rpx;
			border-radius: 30rpx 30rpx 30rpx 0;
		}

		.all {
			font-weight: normal;
			font-size: 28rpx;
			// color: $mxg-text-color-grey;

			.iconfont {
				font-size: 25rpx;
			}
		}

		.list-swiper {
			height: 800rpx;

			.swiper-item {
				// height: 400rpx;
				padding: 20rpx;
				// background-color: red;
			}
		}
	}
</style>
